<script lang="ts" setup>
import { ref, getCurrentInstance } from "vue";
import { useDraggable } from "vue-draggable-plus";
import type Typings from "@/typings";
import origins from "./origin";
import AttrDrawer from "./components/attr-drawer.vue";

const curIns = getCurrentInstance()?.proxy;

const formJsons = ref<Typings.Local.CreateForm.formJsons[]>([]);

const originRef = ref();
useDraggable(originRef, origins, {
  animation: 150,
  group: { name: "people", pull: "clone", put: false },
  sort: false,
  onClone() {
    console.log("clone");
    console.log(formJsons.value);
  },
});

const formJsonRef = ref();
useDraggable(formJsonRef, formJsons, { animation: 150, group: "people" });

const attr = ref();
const handleSelectItem = (
  item: Typings.Local.CreateForm.formJsons,
  index: number
) => {
  attr.value.open(item, index);
};

const handleDisabled = (item: Typings.Local.CreateForm.formJsons) => {
  item.defaultValue = "123";
  item.disabled = true;
  item.span = 12;
};

const handlePreview = () => {
  window.sessionStorage.setItem("FormJson", JSON.stringify(formJsons.value));

  curIns?.$router.push({
    path: "/form-preview",
  });
};
</script>

<template>
  <div class="flex flex-row w-screen h-screen gap-[10px]">
    <section
      ref="originRef"
      class="flex flex-col w-[250px] h-full gap-2 bg-gray-500/5"
    >
      <div
        v-for="item in origins"
        :key="Math.random()"
        class="origin-item p-[12px] bg-gray-200"
        :class="`span-${item.span}`"
      >
        {{ item.label }}
      </div>
    </section>

    <section class="flex-1 w-full h-full overflow-hidden flex flex-col">
      <xt-form
        class="form-container w-full h-full overflow-auto flex-1"
        labelWidth="108px"
      >
        <xt-row
          ref="formJsonRef"
          class="w-full py-[10px] box-border bg-gray-500/5"
        >
          <xt-col
            v-for="(item, index) in formJsons"
            :key="Math.random()"
            class="form-item p-[12px] inline-block"
            :span="item.span || 12"
          >
            <xt-form-item
              :label="item.label"
              :prop="item.prop"
              :rules="item.rules || []"
            >
              <template v-if="['input'].includes(item.el)">
                <xt-input
                  readonly
                  v-model="item.defaultValue"
                  :disabled="item.disabled"
                  :placeholder="item.placeholder"
                ></xt-input>
              </template>

              <template v-if="['textarea'].includes(item.el)">
                <xt-input
                  type="textarea"
                  readonly
                  v-model="item.defaultValue"
                  :autosize="{ minRows: 6 }"
                  :disabled="item.disabled"
                  :placeholder="item.placeholder"
                ></xt-input>
              </template>

              <template v-if="['select'].includes(item.el)">
                <xt-select
                  readonly
                  v-model="item.defaultValue"
                  :disabled="item.disabled"
                  :placeholder="item.placeholder"
                  :options="item.options || []"
                ></xt-select>
              </template>

              <template v-if="['radio'].includes(item.el)">
                <xt-radio
                  readonly
                  v-model="item.defaultValue"
                  :disabled="item.disabled"
                  :options="item.options || []"
                ></xt-radio>
              </template>

              <template v-if="['checkbox'].includes(item.el)">
                <xt-checkbox
                  readonly
                  v-model="item.defaultValue"
                  :disabled="item.disabled"
                  :options="item.options || []"
                ></xt-checkbox>
              </template>
            </xt-form-item>
            <div class="handler-btn">
              <span
                class="inline-block w-[20px] h-[20px] bg-[red] ml-[8px]"
                @click="handleSelectItem(item, index)"
              />

              <span
                class="inline-block w-[20px] h-[20px] bg-[black] ml-[8px]"
                @click.stop="handleDisabled(item)"
              />
            </div>
          </xt-col>
        </xt-row>
      </xt-form>

      <div class="handle-btn-container text-center p-[10px] box-border">
        <xt-button @click="handlePreview">预览</xt-button>
      </div>
    </section>
  </div>

  <attr-drawer ref="attr" />
</template>

<style lang="scss" scoped>
.origin-item {
  height: 48px !important;
  min-width: 250px;

  &.sortable-ghost {
    display: inline-block;
    height: 100px;
    &.span-8 {
      width: 33.33%;
    }
    &.span-12 {
      width: 50%;
    }
    &.span-16 {
      width: 66.67%;
    }
    &.span-20 {
      width: 80%;
    }
    &.span-24 {
      width: 100%;
    }
  }
}

.form-item {
  display: inline-block;
  min-height: 100px;
  border: 1px dashed rgba(#999, 0.4);

  .handler-btn {
    display: flex;
    flex-direction: row;
    justify-content: right;
    margin-top: 12px;
  }
}

.form-container {
  .el-form-item {
    margin-bottom: 0 !important;
  }
}
</style>
